<template>
	<view >
		<view class="bac_c">
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange ">叶龄：{{txtdata.yl_yl}}</text>
				</view>
				<view class="action width50">
					<text class="cuIcon-title text-orange ">叶长：{{txtdata.yl_yc}}cm</text> 
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange "> 分蘖数：{{txtdata.yl_fns}}</text>
				</view>
				<view class="action width50">
					<text class="cuIcon-title text-orange ">有效光合面积：{{txtdata.yl_ysbhd}}c㎡</text> 
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange "> 叶色(饱和度)：{{txtdata.yl_ysbhd}}</text>
				</view>
				<view class="action width50">
					<text class="cuIcon-title text-orange ">叶色(色度)：{{txtdata.yl_yssd}}</text> 
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange "> 空气温度：{{txtdata.yl_kqwd}}℃</text>
				</view>
				<view class="action width50">
					<text class="cuIcon-title text-orange ">空气湿度：{{txtdata.yl_kqsd}}%</text> 
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange "> 光照度：{{txtdata.yl_gzd}}klux</text>
				</view>
				<view class="action width50">
					<text class="cuIcon-title text-orange ">泥温：{{txtdata.yl_nw}}℃</text> 
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange "> 冠层下温度：{{txtdata.yl_gxcwd}}℃</text>
				</view>
				<view class="action width50">
					<text class="cuIcon-title text-orange ">冠层下湿度：{{txtdata.yl_gxcsd}}℃</text> 
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action width50">
					<text class="cuIcon-title text-orange "> 水位：{{txtdata.yl_sw}}m</text>
				</view>
			</view>
		
		</view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>历史数据
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">开始日期/时间</view>
			<picker mode="date"   @change="bindDateChange">
				<view class="picker">{{start_date||currentDate}}</view>
			</picker>
			 <picker mode="time" :value="time"  @change="bindTimeChange">
					<view class="picker">{{time}}</view>
			 </picker>
		</view>
		<view class="cu-form-group">
			<view class="title">结束日期/时间</view>
			<picker mode="date"  :start="start_date" @change="bindDateChange2">
				<view class="picker">{{start_date2||currentDate}}</view>
			</picker>
			<picker mode="time" :value="time"  @change="bindTimeChange">
				<view class="picker">{{time}}</view>
			</picker>
		</view>
		<view class="padding">
			<button class="cu-btn block bg-blue margin-tb-sm lg" @click="sjcxxq">查询</button>
		</view>
		<scroll-view scroll-x scroll-y class="scroll-view-item_H2">
			<view class="table">
				 <view class="tr bg-w">
					 <view class="th" style="width: 50%;">时间</view>
					 <view class="th">叶龄</view>
					 <view class="th">叶长(cm)</view>
					 <view class="th">分蘖数</view>
					 <view class="th" style="width: 52%;">有效光合面积(c㎡)</view>
					 <view class="th" style="width: 50%;">叶色(饱和度)</view>
					 <view class="th">叶色(色度)</view>
					 <view class="th ">空气温度(℃)</view>
					 <view class="th ">空气湿度(℃)</view>
					 <view class="th ">土壤温度(℃)</view>
					 <view class="th ">土壤湿度(℃)</view>
					 <view class="th ">泥温(℃)</view>
					 <view class="th ">水位(m)</view>
				 </view>
				 <view v-for="(item,index) in listData" :key="index" class="tr" :class='index % 2 == 0? "bg-g":""'>
					  <view class="td" style="width: 50%;">{{item.yl_djsj}}</view>
					  <view class="td">{{item.yl_yl}}</view>
					  <view class="td">{{item.yl_yc}}</view>
					  <view class="td">{{item.yl_fns}}</view>
					  <view class="td" style="width: 52%;">{{item.yl_yxghmj}}</view>
					  <view class="td" style="width: 50%;">{{item.yl_ysbhd}}</view>
					  <view class="td">{{item.yl_yssd}}</view>
					  <view class="td">{{item.yl_kqwd}}</view>
					  <view class="td">{{item.yl_kqsd}}</view>
					  <view class="td">{{item.yl_trwd}}</view>
					  <view class="td">{{item.yl_trsd}}</view>
					  <view class="td">{{item.yl_nw}}</view>
					  <view class="td">{{item.yl_sw}}</view>
			
				 </view>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	import {getsjcxxq} from '../api/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
						format: true
					})
			return {
				parm:{},
				txtdata:{},
				start_date: currentDate,
				time: '00:00',
				start_date2: currentDate,
				time2: '00:00',
				currentDate : currentDate,
				listData:[
				 ]
			}
		},
		onLoad: function (option) { 
			this.txtdata=JSON.parse(option.sjcx_xq) ;
			this.parm={dk_bh:option.dk_bh,deviceId:option.deviceId}
		},
		methods:{
			sjcxxq(){
				let parm={
					dk_bh:this.parm.dk_bh,
					deviceId:this.parm.deviceId,
					startTime:this.start_date+' '+this.time,
					endTime:this.start_date2+' '+this.time2,
					};
			
				getsjcxxq(parm,
				res=>{
					this.listData=res.data.returnData.sjcx_xq
				})
			},
			 // 选择日期
			 		bindDateChange: function(e) {
			 			this.start_date = e.target.value;
			 			
			 		},
			 		bindDateChange2: function(e) {
			 			this.start_date2 = e.target.value;
			 		},
					 bindTimeChange: function(e) {
					            this.time = e.target.value
					},getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}		 	
		}
	}
	
	    
</script>

<style scoped>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css"; 
	.text-orange{
		font-size: 28rpx !important;
	}
	.bac_c{
		background: #f1f1f1;
		padding-bottom: 30upx;
	
	}
	.padleft{
	    padding-left: 30upx;	
	}
	.table{
		width: 230%;
	}
	
	
	
</style>
